/**
 *   小程序没有数据双向绑定
 * 
 * 1.输入框绑定，值改变事件， input事件
 *   1）获取到输入框的值
 *   2）合法性判断
 *   3）检验通过，把输入框的值，发送到后台
 *   4）返回的数据打印到页面上
 * 2.防抖（防止抖动） 使用 定时器
 *   1）定义全局的定时器ID
 */
// 1.引入用来发送请求的方法，一定要补全路径
import { request } from "../../request/request.js"

Page({
  data: {
    goodsList: [], // 搜索结果列表数据
    isFocus: false, // 按钮默认隐藏
    inputValue: "" //输入框的值默认为空字符串
  },
  // 页面开始加载 就会触发
  onLoad() {},
  // 全局定时器ID
  TimeId: -1,
  // 绑定输入框，值发生改变，就会触发事件
  handleInput(e) {
    // console.log(e)
    // 1.获取输入框的值
    const { value } = e.detail
    // 2.检测合法性
    if(!value.trim()) {
      this.setData({
        goodsList: [],
        isFocus: false
      })
      // 值不合法，直接返回
      return
    }
    // 3.准备发送请求获取数据 1s后发送请求
    this.setData({
      isFocus: true
    })
    clearTimeout(this.TimeId)
    this.TimeId = setTimeout(() => {
      this.qsearch(value)
    }, 1000)
  },
  // 发送请求获取搜索建议数据
  async qsearch(query) {
    // 发送请求
    const res = await request({
      url: '/goods/qsearch',
      data: {query}
    })
    this.setData({
      goodsList: res
    })
    // console.log(res)
  },
  // 点击取消按钮
  handleCancel() {
    this.setData({
      inputValue: "",
      isFocus: false,
      goodsList: []
    })
  }
})
